<template>
  <div style="width: 100%; height: 100%">
    <div id="contsainer"></div>
    <div style="position: absolute; top: 50px; right: 50px; background: white; padding: 10px">
      <el-slider v-model="viewModel.resolutionScale" :min="0.1" :max="2.0" :step="0.1" @change="valueChange"> </el-slider>

      <el-checkbox v-model="viewModel.useBrowserRecommendedResolution" @change="checkedChange">是否使用浏览器推荐分辨率 </el-checkbox>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null,
      viewModel: {
        useBrowserRecommendedResolution: false,
        resolutionScale: 0.25
      }
    }
  },
  mounted() {
    this.initCesium()
    this.addBox(this.viewer)
    this.updateResolution()
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: true,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addBox(viewer) {
      let blueBox = viewer.entities.add({
        name: 'Blue box',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          material: Cesium.Color.BLUE,
          heightReference: Cesium.HeightReference.NONE
        }
      })

      let redBox = viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          heightReference: Cesium.HeightReference.NONE,
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }
      })

      let outlineOnly = viewer.entities.add({
        name: 'Yellow box outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          fill: false,
          outline: true,
          outlineWidth: 20,
          outlineColor: Cesium.Color.YELLOW,
          heightReference: Cesium.HeightReference.NONE
        }
      })

      viewer.zoomTo(viewer.entities)
    },
    updateResolution() {
      this.viewer.useBrowserRecommendedResolution = this.viewModel.useBrowserRecommendedResolution
      let resolutionScale = Number(this.viewModel.resolutionScale)
      resolutionScale = !isNaN(resolutionScale) ? resolutionScale : 1.0
      resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0)
      this.viewer.resolutionScale = resolutionScale
    },
    valueChange(value) {
      this.viewModel.resolutionScale = Number(value)
      this.updateResolution()
    },
    checkedChange(value) {
      console.log(value)
      this.viewModel.useBrowserRecommendedResolution = value
      this.updateResolution()
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
